<template>
  <div>
    <div class="total">
      <div class = "header3">
        <ul class="lev">
          <li>
            <dv-border-box7>
            <h1>(80,100]</h1>
            <h2>S</h2>
            </dv-border-box7>
          </li>
          <li>
            <dv-border-box7>
            <h1>(60,80]</h1>
            <h2>A</h2>
            </dv-border-box7>
          </li>
          <li>
            <dv-border-box7>
            <h1>(40,60]</h1>
            <h2>B</h2>
            </dv-border-box7>
          </li>
          <li>
            <dv-border-box7>
            <h1>(20,40]</h1>
            <h2>C</h2>
            </dv-border-box7>
          </li>
          <li>
            <dv-border-box7>
            <h1>(0,20]</h1>
            <h2>D</h2>
            </dv-border-box7>
          </li>
        </ul>
        <h2><span style="color: #f39c12; font-size: 0.5rem;">{{ ownerinfo_login }}</span>开发者的评估价值</h2>
      </div>
      <div class="sphere">
        <div class="sphere-bg"></div>
        <div class="sum">
          <p>{{ value_score }}</p>
          <span>{{value_score_lev}}</span>
        </div>
      </div>
      <div class="cicle3"></div>
      <div class="cicle4"></div>
      <div class="cicle5"></div>
      <div class="cicle6"></div>
      <div class="cicle7"></div>
      <div id="cicle8">
<!--        <span>团队协作能力</span>-->
<!--        <p class="p1">{{ team_score.value }}</p>-->
<!--        <p class="p2">{{ team_score_lev.value }}</p>-->
        <Cicle8 v-bind="data"></Cicle8>
      </div>
      <div id="cicle9">
<!--        <span>{{ title }}</span>-->
<!--        <p class="p1">{{ score }}</p>-->
<!--        <p class="p2">{{ level }}</p>-->
        <Cicle9 v-bind="data2"></Cicle9>
      </div>
      <div id="cicle10">
<!--        <span>{{ title }}</span>-->
<!--        <p class="p1">{{ score }}</p>-->
<!--        <p class="p2">{{ level }}</p>-->
        <Cicle10 v-bind="data3"></Cicle10>
      </div>
      <div id="cicle11">
<!--        <span>{{ title }}</span>-->
<!--        <p class="p1">{{ score }}</p>-->
<!--        <p class="p2">{{ level }}</p>-->
        <Cicle11 v-bind="data4"></Cicle11>
      </div>
      <div id="cicle12">
<!--        <span>{{ title }}</span>-->
<!--        <p class="p1">{{ score }}</p>-->
<!--        <p class="p2">{{ level }}</p>-->
        <cicle12 v-bind="data5"></cicle12>
      </div>
      </div>
    </div>
</template>


<script setup>
import { ref,toRefs,defineProps,reactive } from 'vue'
import Cicle8 from "@/components/cicle/cicle8.vue"
import Cicle9 from "@/components/cicle/cicle9.vue"
import Cicle10 from "@/components/cicle/cicle10.vue"
import Cicle11 from "@/components/cicle/cicle11.vue"
import Cicle12 from "@/components/cicle/cicle12.vue"

const props = defineProps({
  value_score:Number,
  value_score_lev:String,
  team_score: Number,
  pm_score: Number,
  learn_score:Number,
  code_score:Number,
  eng_score:Number,
  pm_score_lev:String,
  code_score_lev:String,
  eng_score_lev:String,
  learn_score_lev:String,
  team_score_lev:String,
  ownerinfo_login:String
});
const {
  ownerinfo_login,
  value_score,
  value_score_lev,
  team_score,
  pm_score,
  learn_score,
  code_score,
  eng_score,
  pm_score_lev,
  code_score_lev,
  eng_score_lev,
  learn_score_lev,
  team_score_lev } = toRefs(props);
// console.log("userlogin",props)
const data = reactive({
  title: "团队协作能力",
  score: team_score,
  level: team_score_lev,
  description:
      "团队协作能力能够评估开发者和协作者的联系的密切程度的指标。目标是激励更多的开发者积极参与到开源项目中，共同贡献代码、参与讨论，为项目的发展做出更多的贡献。通过对开发者敬业度的评估，可以促进开源社区的发展，提高开源项目的质量和可靠性。"
});
// console.log(data)
// 解构props对象

// const data =
//   {
//     title: props.ownerinfo_login,
//     score: props.coding_score,
//     level: "D",
//     description:
//         "团队协作能力能够评估开发者和协作者的联系的密切程度的指标。目标是激励更多的开发者积极参与到开源项目中，共同贡献代码、参与讨论，为项目的发展做出更多的贡献。通过对开发者敬业度的评估，可以促进开源社区的发展，提高开源项目的质量和可靠性。",
//   };
const data2 =reactive({
  title: "编程能力",
  score: code_score,
  level: code_score_lev,
  description: "这是第二个文本框",
})

const data3 = reactive({
      title: "项目管理能力",
      score: pm_score,
      level: pm_score_lev,
      description:
          "开发者的项目管理能力意在寻找与人沟通、解决问题、协调能力强的开发者。这些开发者统筹能力强。能够控制局面，规划全局，建立团队，整合资源，引领项目的发展。",
    })
const data4 =reactive(
    {
      title: "敬业度",
      score: eng_score,
      level: eng_score_lev,
      description: "这是第四个文本框",
    })
const data5 =reactive(
    {
      title: "学习能力",
      score: learn_score,
      level: learn_score_lev,
      description: "这是第五个文本框",
    })

</script>

<style lang="less">
.anim-stop { animation-play-state: paused; }
.total{
  height: 16rem;
  margin: 0.125rem;
  .header3 {
    height: 1.2rem;
    width: 100%;
    position: relative;
    top: 100px;
    margin-top : -4%;
    //background-color: rgba(2, 2, 42, 0.2);
    h2 {
      height: 0.6rem;
      color: rgb(169,166,171);
      line-height: 0.6rem;
      text-align: center;
      font-size: 0.5rem;
      font-family: 华文细黑;
      //transform: rotate3d(0.5, -0.5, 0, -30deg);
      text-shadow: -1px -1px 1px rgba(0,0,0,0.2), 1px 1px 1px rgba(255,255,255,0.2);
      clip-path: circle(50%);
    }

    .lev {
      list-style-type: none; /* 去掉列表项的标记 */
      margin: 0; /* 去掉外边距 */
      padding: 0; /* 去掉内边距 */
      //overflow: hidden; /* 隐藏溢出的内容 */
      /* 设置li元素的样式 */
      li {
        margin-top: -40px;
        float: left; /* 让每个li元素浮动在一行中 */
        width: 20%; /* 设置每个li元素的宽度为20% */
        height: 70px; /* 设置每个li元素的高度为100px */
        //border: 1px solid #ec1717; /* 设置每个li元素的边框为1px实线 */
        h1{
          color: rgba(172, 236, 239, 0.5);
          text-align: center;
          font-size: 0.4rem;
          font-family: "Times New Roman";
          clip-path: circle(50%);
        }
        h2{
          color: rgb(217, 208, 42);
          text-align: center;
          font-size: 0.4rem;
          font-family: "Times New Roman";
          clip-path: circle(50%);
        }
      }
    }
  }
  /* 设置ul元素的样式 */
  .dashed {
    position: absolute;
    left: 0;
    top: 0;
  }
  .sphere {
    width   : 11rem;
    height  : 11rem;
    position: relative;
    margin  : 10% auto 0;

    .sphere-bg {
      position       : absolute;
      z-index        : 100;
      left           : 0;
      top            : 0;
      width          : 100%;
      height         : 100%;
      background     : url("~@/images/53earth.png") no-repeat center;
      background-size: contain;
      // animation   : rotate 5s linear infinite;
    }

    .sum {
      position       : absolute;
      z-index        : 100;
      left           : 0;
      top            : 0;
      width          : 100%;
      height         : 100%;
      background     : url("~@/images/53cloud.png") no-repeat center;
      background-size: 55%;

      p {
        margin-top : 31%;
        text-align : center;
        color      : #003c63;
        font-family: 'LCdd';
        font-size  : 1rem;
      }
      span {
        display     : block;
        margin-top  : 0%;
        text-align: center;
        color       : rgb(0, 0, 0);
        font-size   : 0.4rem;
        font-family: 华文中宋;
      }
    }
  }
  .cicle3 {
    width          : 10.5rem;
    height         : 10.5rem;
    background     : url("~@/images/circle.png") no-repeat center;
    background-size: 100%;
    position       : absolute;
    top            : 50%;
    left           : 50%;
    transform-style: preserve-3d;
    transform      : translateX(-50%) rotateX(75deg);
    animation      : rotate3 20s linear infinite;
  }
  .cicle4 {
    width          : 8rem;
    height         : 8rem;
    position       : absolute;
    top            : 55%;
    left           : 50%;
    transform-style: preserve-3d;
    background     : url("~@/images/53gqright.png") no-repeat center;
    background-size: 100%;
    transform      : translateX(-50%) rotateX(75deg);
    animation      : rotate3 2s linear infinite;
  }

  .cicle5 {
    width          : 8rem;
    height         : 8rem;
    position       : absolute;
    top            : 60%;
    left           : 50%;
    transform-style: preserve-3d;
    background     : url("~@/images/53gqleft.png") no-repeat center;
    background-size: 100%;
    transform      : translateX(-50%) rotateX(75deg);
    animation      : rotate4 2s linear infinite;
  }

  .cicle6 {
    width          : 8rem;
    height         : 8rem;
    position       : absolute;
    top            : 65%;
    left           : 50%;
    transform-style: preserve-3d;
    background     : url("~@/images/535gqbottomright.png") no-repeat center;
    background-size: 100%;
    transform      : translateX(-50%) rotateX(75deg);
    animation      : rotate3 2s linear infinite;
  }

  .cicle7 {
    width          : 7rem;
    height         : 7rem;
    position       : absolute;
    top            : 70%;
    left           : 50%;
    transform-style: preserve-3d;
    background     : url("~@/images/53gqbottomleft.png") no-repeat center;
    background-size: 100%;
    transform      : translateX(-50%) rotateX(75deg);
    animation      : rotate4 2s linear infinite;
  }

}


@font-face {
  font-family: 'LCdd';
  src: url("~@/fonts/LCdd.TTF");
}
@keyframes rotate3 {
  0% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(0)
  }

  100% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(360deg)
  }
}
@keyframes rotate4 {
  0% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(0)
  }

  100% {
    transform: translateX(-50%) rotateX(75deg) rotateZ(-360deg)
  }
}
</style>
